<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="sum">{{1>2?3:4}}</div>
			<div class="val1">{{val1}}</div>
			<div class="val2">{{val2}}</div>
			<div class="goods">{{goods}}</div>
			<button @click="update()">更改goods</button>
			<div class="num" v-for="item in list">
				{{item}}
			</div>
			<div class="div1" v-for="isShow"></div>
		</div>
	</body>
</html>
<script>
	//vue:面对数据编码
	const {createApp,ref} = Vue;
	//创建一个app应用程序 application
	const app = createApp({
		//vue管理的数据
		data(){
			return {
				goods:'这是一个商品',
				val1:1,
				val2:2,
				list:[1,2,3],
				isShow:true
			}
		},
		//方法
		methods:{
			sum(){
				return this.val1 + this.val2
			},
			update(){
				this.goods = '这是鼠标'
			}
		}
	});
	//mvvm的思维模型，m:model数据，v:view视图，vm:viewModel试图数据连接层
	const vm = app.mount("#app")
</script>